<!DOCTYPE html>
<html>
<head>
	<title>bigger img</title>
	<meta charset="utf-8" />
	<style type="text/css">
		.show-img{
			position: absolute;
		}
		.offset-1{
			top: 300px;
			left: 500px;
		}
		.offset-2{
			bottom: 300px;
			right: 500px;
		}
		img{
			width: 160px;
			height: auto;
		}

		.ret-img{
			position: absolute;
			width: 0;
			height: 0
		}
		.ret-img img{
			width: 0;
			height: 0;
		}
		
	</style>
</head>
<body>

	<div data-index='c-img-5' class="show-img offset-2">
		<img src="./60.jpg" />
	</div>
	<div data-index='c-img-21' class="show-img offset-1">
		<img src="./60.jpg" />
	</div>

	<div class="ret-img">
		<img src="./60.jpg" />
	</div>

	<script type="text/javascript" src="./jquery.min.js"></script>
	<script type="text/javascript">
		
		$(function (argument) {
			console.log('loading..')
			// console.log($('img').parents('div'))
			var cimgs = $('img').parents('div')
			for (var i = 0; i < cimgs.length; i++) {
				// console.log( typeof(cimgs[i].dataset.index) )
				if (cimgs[i].dataset.index != undefined) {
					// console.log(cimgs[i].dataset.index.substring(0,6))
					if ( cimgs[i].dataset.index.substring(0,6) == 'c-img-' ) {
						// console.log(i)

						// console.log(cimgs[i].dataset.index.substring(6,cimgs[i].dataset.index.length) )
					}
				}
				
			}

			// start position
			var start_pos = {
				x:0,
				y:0,
			}
			// 原图大小
			var cur_img = {
				w: 0,
				h: 0,
			}

			$('.show-img').click(function() {
				console.log($(this))
				console.log($(this)[0].dataset)
				console.log($(this)[0].offsetTop)
				console.log($(this)[0].offsetLeft)
				console.log($(this).find('img').width())
				console.log($(this).find('img').height())

				cur_img.w = $(this).find('img').width()
				cur_img.h = $(this).find('img').height()
				// start position
				start_pos.x = $(this)[0].offsetLeft + $(this).find('img').width()/2
				start_pos.y = $(this)[0].offsetTop + $(this).find('img').height()/2
				console.log(start_pos)

				// get ret-img box position
				$('.ret-img').css({
					// left: start_pos.x,
					// top: start_pos.y,
					left: 1,
					top: 1,
					width: cur_img.w,
					height: cur_img.h,
					opacity: .8,
				})

			})
		})


	</script>

</body>
</html>